<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单号">
        <el-input v-model="listQuery.oid" />
      </el-form-item>

      <el-form-item label="药店名称">
        <el-input v-model="listQuery.companyName" />
      </el-form-item>

      <el-form-item label="商品名称">
        <el-input v-model="listQuery.goodsName" />
      </el-form-item>

      <el-form-item label="合作商">
        <el-input v-model="listQuery.supplierName" />
      </el-form-item>

      <el-form-item label="省市区查询" type="datetimerange">
        <areaSelect :data="listQuery" propsValue="name"></areaSelect>
      </el-form-item> 

      <el-form-item label="业务员">
        <el-input v-model="listQuery.saleName" />
      </el-form-item>

      <el-form-item label="下单时间">
        <div class="block">
          <el-date-picker
            v-model="value2"
            @change="change"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList(1)">搜索</el-button>
        <el-button plain @click="toExport()">excel导出</el-button>
        <el-button plain @click="seeExoprt()">查看导出</el-button>
      </el-form-item>
    </el-form>

    <mytable :data="list" ref="table" @getList="getList" :listQuery="listQuery">
      <el-table-column prop="oid" align="center" label="订单号"></el-table-column>
      <el-table-column prop="companyName" align="center" label="药店名称"></el-table-column>
      <el-table-column prop="goodsName" align="center" label="商品名称"></el-table-column>
      <el-table-column prop="factory" align="center" label="生产厂商"></el-table-column>
      <el-table-column prop="approvalNumber" align="center" label="批准文号"></el-table-column>
      <el-table-column prop="supplierName" align="center" label="合作商"></el-table-column>
      <el-table-column prop="saleName" align="center" label="业务员"></el-table-column>
      <el-table-column prop="addTime" align="center" label="下单时间"></el-table-column>
      <el-table-column prop="stat" align="center" label="订单状态"></el-table-column>
      <el-table-column prop="count" align="center" label="采购数量"></el-table-column>
      <el-table-column prop="totalAmt" align="center" label="商品总金额"></el-table-column>
    </mytable>
    <seeexcel ref="seeexcel" />
  </div>
</template>

<script>
import mytable from "@/components/Table";
import seeexcel from "@/components/seeexcel/index";
import areaSelect from "@/views/component/areaSelect";
import apiOrderReport from "@/api/report/orderReport";
import apiPartner from "@/api/partner/partner";
export default {
  name: "orderDetailReport",
  components: { mytable, seeexcel, areaSelect },
  data() {
    return {
      listLoading: true,
      list: [],
      value: [],
      value2: [],
      listQuery: {
        oid: "", //订单号
        companyName: "", //药店名称
        goodsName: "", //商品名称
        saleName: "", //业务员
        supplierName: "", //合作商
        startTime: "", //开始时间
        endTime: "" //结束时间
      },
      supplierNumberList: [], //合作数据集合
      options:[],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },

  created() {
    //合作商
    /*apiPartner.getSupplierUserForSelect().then(res => {
      this.supplierNumberList = res.data.list;
    });*/
  },

  methods: {
    //搜索
    getList(pageNo) {
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      if(this.listQuery.areaId?.length>0){
        this.listQuery.province = this.listQuery.areaId[0]
        this.listQuery.city = this.listQuery.areaId[1] || ''
        this.listQuery.country = this.listQuery.areaId[2] || ''
        this.listQuery.areaId = ''
      }
      apiOrderReport.getDetailList(this.listQuery).then(res => {
        this.$refs.table.load(res.data.page.list, res.data.page.total);
      });
    },
    //导出
    toExport() {
      apiOrderReport.orderDetailExport(this.listQuery).then(res => {
        this.$notify({
          title: "导出提示",
          message: res.data.tip,
          type: "success"
        });
      })
    },
    //查看导出
    seeExoprt() {
      this.$refs.seeexcel.open();
    },
    //下单时间
    change(date) {
      if (date && date.length > 0) {
        this.listQuery.startTime = date[0];
        this.listQuery.endTime = date[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    handleChange(){
      
    }
  }
};
</script>

<style scoped>
</style>